<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>second</title>
    <style>
        @page {
            size: 600px 600px;
            @top-center {
                content: "Document 2, page " counter(page);
            }
        }
        html {
            counter-reset: section 2;
        }
        section {
            page-break-after: always;
            counter-increment: section;
        }
        section::before {
            display: block;
            content: "Section " counter(section) ", page " counter(page);
        }
        a[href]::after {
            content: "Section " target-counter(attr(href url), section) ", page " target-counter(attr(href url), page);
        }
    </style>
</head>
<body>

<section>
    <a href="#fourth-page">link to </a>
</section>

<section>
    <a id="fourth-page"></a>
    <p><a href="first.html">link to (first HTML) </a></p>
    <p><a href="first.html#second-page">link to (first HTML) </a></p>
</section>

</body>
</html>